<div class="layuimini-container layuimini-page-anim">
	<div class="layuimini-main">

		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加</button>
			</div>
		</script>

		<script type="text/html" id="itemContent">
			<div style="margin: 10px 10px;text-align: center;">
				<form class="layui-form layui-form-pane" lay-filter="data-form">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">城市名称</label>
							<div class="layui-input-inline">
								<select lay-verify="required" name="city_id" id="city_id">
									<option value="">请选择</option>
								</select>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">机场简称</label>
							<div class="layui-input-inline">
								<input id="airport_id" lay-verify="required" type="text" name="id" autoComplete="off" class="layui-input" />
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">机场名称</label>
							<div class="layui-input-inline">
								<input type="text" lay-verify="required" name="name" autoComplete="off" class="layui-input" />
							</div>
						</div>
					</div>
					<div class="layui-form-item" style="margin-top: 10px;">
						<div class="layui-inline">
							<a class="layui-btn layui-btn-lg" lay-submit lay-filter="data-ok-btn">确定 </a>
						</div>
					</div>
				</form>
			</div>
		</script>

		<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

		<script type="text/html" id="currentTableBar">
			<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
		</script>

	</div>

</div>

<script>
	var toChildVal = {};

	layui.use(['form', 'table', 'element', 'miniPage'], function () {
		var $ = layui.jquery,
			form = layui.form,
			table = layui.table,
			miniPage = layui.miniPage;

		var cityMap={};
		$.ajax({
			url: "/api/City",
			type: "GET",
			dataType: "json",
			async: false,
			success: function (res) {
				if (res.code == 0) {
					layui.each(res.data, function (index,item) {
						cityMap[item.id]=item.name;
					});
				}
			},
		});

		table.render({
			elem: '#currentTableId',
			url: '/api/Airport',	// ** url
			toolbar: '#toolbarDemo',
			defaultToolbar: ['filter', 'exports', 'print'],
			cols: [[																// ** cols
				{field: 'id', title: 'ID', sort: true},
				{field: 'name', title: '机场'},
				{field: 'countryName', title: '城市', templet: function (item) {
						return cityMap[item.city_id];
					}},
				{field: 'terminals', title: '航站楼', templet: function (item) {
						return item.terminals.map(function (i) {
							return '<span class="layui-badge layui-bg-cyan">'+i.name+'</span>';
						}).join(' ') + ' <span class="layui-badge layui-bg-blue">编辑</span>';
					}, event: 'editTerminal', style:'cursor: pointer;'},
				{title: '操作', toolbar: '#currentTableBar', align: "center"}
			]],
			limits: [10, 20, 50, 100],
			limit: 10,
			page: true
		});

		function editLayer(){
			var index = layer.open({
				title: '编辑',
				type: 1,
				shade: 0.2,
				maxmin: true,
				shadeClose: true,
				area: ['450px', '400px'],
				content: itemContent.innerHTML,
			});
			var selectEl = $('#city_id').empty().append(new Option("请选择", ""));
			$.each(cityMap, function(k, v) {
				selectEl.append(new Option(v, k));
			});
			form.render("select");
			// layui.off('submit(data-ok-btn)', 'form'); //移除事提交件的监听
		}

		// toolbar事件监听
		table.on('toolbar(currentTableFilter)', function (obj) {
			if (obj.event === 'add') {	// 监听添加操作
				// ** content
				editLayer();

				// 监听添加提交
				form.on("submit(data-ok-btn)", function (result) {
					$.ajax({
						url: "/api/Airport",	// ** url
						data: result.field,
						type: "POST",
						dataType: "json",
						success: function (res) {
							layer.closeAll();
							if (res.code == 0) {
								layer.msg("添加成功", {icon: 1, time: 2000});
							} else {
								layer.msg(res.msg, {icon: 2, time: 2000});
							}
							table.reload('currentTableId');
						},
					});
				});
			}
		});

		//监听单元格工具
		table.on('tool(currentTableFilter)', function (obj) {
			var data = obj.data;
			if (obj.event === 'edit') {

				// ** content
				editLayer();
				form.val('data-form', data);
				$("#airport_id").attr("readonly","readonly").addClass('layui-btn-disabled');

				// 监听修改提交
				form.on("submit(data-ok-btn)", function (result) {
					$.ajax({
						url: "/api/Airport/" + data.id,	// ** url
						data: result.field,
						type: "PUT",
						dataType: "json",
						success: function (res) {
							layer.closeAll();
							if (res.code == 0) {
								layer.msg('修改成功！');
							} else {
								layer.msg(res.msg);
							}
							table.reload('currentTableId');
						}
					});
				});

			} else if (obj.event === 'delete') {
				// 监听删除操作
				layer.confirm('确认是否删除？', function (index) {
					$.ajax({
						url: "/api/Airport/" + data.id,	// ** url
						type: "DELETE",
						dataType: "json",
						success: function (res) {
							if (res.code == 0) {
								obj.del();
								layer.msg('删除成功！');
							} else {
								layer.msg(res.msg);
							}
						}
					});

					layer.close(index);
				});
			} else if(obj.event === 'editTerminal'){
				toChildVal.aid = data.id;
				var content = miniPage.getHrefContent('pages/tables/terminal-manage.html');
				var openWH = miniPage.getOpenWidthHeight();

				var index = layer.open({
					title: '编辑 <b>'+data.name+'</b> 航站楼',
					type: 1,
					shade: 0.2,
					maxmin:true,
					shadeClose: true,
					area: [openWH[0] + 'px', openWH[1] + 'px'],
					offset: [openWH[2] + 'px', openWH[3] + 'px'],
					content: content,
					cancel: function(index, layero){
						table.reload('currentTableId');
						layer.close(index);
						return false;
					}
				});
				$(window).on("resize", function () {
					layer.full(index);
				});
				return false;
			}

		});
	});
</script>
